import React from 'react';
import { useRequest } from 'ahooks';
import { connect } from 'dva';
import { Spin } from 'antd';
import TopFilterForm from '@/components/MarketingMap/TopFilterForm';
import MapContainer from '@/components/MapContainer';
import { SidebarConten } from '@/components/MarketingMap/Sidebar';
import { fetchOverview } from '@/services/marketingMap/residentSiteAnalysis';
import MaskLoad from '@/components/MarketingMap/MaskLoad';
import IntervalCard from '@/components/MarketingMap/IntervalCard';
import useForm from '@/components/MarketingMap/TopFilterForm/useForm';
import usePermissionCheck from '@/hooks/usePermissionCheck';
import StatisticsOverview from './StatisticsOverview';
import OverallContext from '../context';
import styles from '../styles/index.less';
import useMap from './useMap';

const ResidentSiteAnalysis: React.FC<any> = ({ form, isAuth }) => {
  const { loading: isLoading, date, options, initialValue, query, onSubmit } = form;

  const { data, loading } = useRequest(() => fetchOverview(query), {
    refreshDeps: [JSON.stringify(query)],
  });

  const { map, markerClick, onRenderingCompleted } = useMap(data, isAuth);

  const provider = {
    date,
    query,
    onSubmit,
  };

  return (
    <OverallContext.Provider value={provider}>
      <div className={styles.wrapper}>
        <div className={styles.top_wrap}>
          <TopFilterForm
            defaultValue={initialValue}
            value={query}
            onSubmit={onSubmit}
            options={options || {}}
            auth="resident-screen"
          />
        </div>
        <SidebarConten>
          <StatisticsOverview
            map={map}
            markerClick={markerClick}
            overviewData={data?.overviewData}
            rankData={data?.rankData}
          />
        </SidebarConten>
        {(loading || isLoading) && <MaskLoad />}
        {!!data?.distributionData?.length && (
          <div className={styles.interval_card}>
            <IntervalCard
              name="活跃车辆数（台）"
              max={Math.max(
                ...data.distributionData.map((item: { vehicleCount: any }) => item.vehicleCount),
              )}
            />
          </div>
        )}
        <MapContainer plugins={['AMap.HeatMap']} onRenderingCompleted={onRenderingCompleted} />
      </div>
    </OverallContext.Provider>
  );
};

// export default connect(({ menu }: any) => ({ permissions: menu.permissions }))(({ permissions }:any) => {
//   const [isAuth] = usePermissionCheck(permissions, 'resident-screen');
//   const form = useForm(isAuth);

//   return form.state ? (
//     <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
//       <Spin />
//     </div>
//   ) : (
//     <ResidentSiteAnalysis form={form} isAuth={isAuth}/>
//   );
// });

export default connect(({ menu, loading }: any) => ({
  permissions: menu.permissions,
  loading: loading.models.menu,
}))(({ permissions, loading }: any) => {
  const [isAuth] = usePermissionCheck(permissions, 'resident-screen');
  // const form = useForm(isAuth, loading, false);
  const form = useForm(isAuth, loading);

  return form.state ? (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 24 }}>
      <Spin />
    </div>
  ) : (
    <ResidentSiteAnalysis form={form} isAuth={isAuth} />
  );
});
